<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/header.jsp" %>
<title>原型系统</title>
<style type="text/css">
.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}
</style>
<script type="text/javascript">
 function addTab(treeNode){
	 if($('#tab').tabs('exists',treeNode.name)){
		 $('#tab').tabs('select',treeNode.name);
		 }else{
	     $('#tab').tabs('add',{
			title: treeNode.name,
			iconCls:treeNode.icon,
			content: '<iframe src="${base}'+treeNode.actionUrl+'" frameborder="0" style="width:100%;height:100%;"></iframe>',
			closable: true
		});
	 }
 } 

  var zTree;
   var  nodeList = [];
   var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			view: {
				dblClickExpand: false,
				fontCss: getFontCss
			},
			callback: {
				onClick: onClick
			}
		};
	
   function onClick(event, treeId, treeNode){
	   if(!treeNode.isParent){
		   if(treeNode.openType=='1'){
			   addTab(treeNode);
		   }else
			  window.open(treeNode.actionUrl);
	   }else{
		   if(treeNode.level!=0)
		   zTree.expandNode(treeNode);
		}
   }
   
   //搜索功能开始 
   function getFontCss(treeId, treeNode) {
		return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
	}
 
   function updateNodes(highlight) {
		for( var i=0, l=nodeList.length; i<l; i++) {
			nodeList[i].highlight = highlight;
			  if(nodeList[i].level>0){
				var node=nodeList[i].getParentNode();
			    var level = node.level;
			while(level>0){
				node.highlight = highlight;
				zTree.updateNode(node);
				level=node.level;
				node=node.getParentNode();
				
			}
		 }
			zTree.updateNode(nodeList[i]);
		}
	}
   
   function searchNode(nodeText) {
			var value = nodeText;
			var keyType = "name";
			if (value === "") return;
			updateNodes(false);
			nodeList = zTree.getNodesByParamFuzzy(keyType, value);
		    updateNodes(true);
	}
 //搜索功能结束 
 
 $(function(){
  //初始化菜单
	$.post("${base}sysResource/menuTree",null,function(data){
		if(data){
		zTree=$.fn.zTree.init($("#treeMenu"), setting,data);
		zTree.expandAll(true);
		}else{
            $("#treeMenu").text("亲，您还未获取菜单权限哦！");
		}
	},"json");
	  $("#menuSearch").textbox({onClickButton:function(){
		  searchNode($("#menuSearch").textbox('getValue'));
	}}); 
})

//清空打开的tab页
 function clearTabs(){
	var tabs = $("#tab").tabs("tabs");
	while(tabs.length>1){
		var title=tabs[1].panel('options').title;
		if(title!='个人首页')
		$("#tab").tabs("close",title);
	}
 }
</script>
</head>
 <body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">导航</div>
	<div data-options="region:'west',split:true,title:'菜单列表'" style="width:180px;padding:10px 0px;">
      <div style="width:100%;position:relative;">
      &nbsp;<input id="menuSearch" class="easyui-textbox" data-options="buttonText:'',buttonIcon:'icon-search',prompt:'菜单搜索'" style="width:95%;height:24px;"/>
    </div>
      <ul class="ztree"  id="treeMenu"></ul>
    </div>
    </div>
	<!-- <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> -->
	<!-- <div data-options="region:'south',border:false" style="height:0px;background:#A9FACD;padding:0px;">south region</div> -->
	<div data-options="region:'center'" style="padding:2px;">
	<div id="tab" class="easyui-tabs" data-options="tools:[{iconCls:'icon-clear',border:false,handler:clearTabs}]"   fit="true">
		<div title="个人首页" data-options="iconCls:'icon-man',closable:false" style="padding:5px;">
			This is the help content.
		</div>
	</div>
	       <%-- <iframe src="${base}user/testPage" frameborder="0" style="width:100%;height:100%;"></iframe> --%>
	</div>
	<!--弹窗div  -->
	<div id="dialog"></div>
</body>
</html>